<template>
 <div class="container" id="app">
			<NavBar
      title="关注店铺"
      left-text=""
      left-arrow
      @click-left="onClickLeft"/>
			<ul class="list_ul">
				<li class="list-item" v-for="(item,index) in list" :key="index" data-type="0">
					<div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="skip">
							<span class="storeImage"><img src="../../static/images/storeImage.jpg" alt=""></span>
              <span class="storeName">潮男店铺</span>
              <span class="storeBianzu"></span>
					</div>
					<div class="delete" @click="deleteItem" :data-index="index">屏蔽动态</div>
					<div class="special" @click="deleteItem" :data-index="index">特别关注</div>
					<div class="cancel" @click="deleteItem" :data-index="index">取消关注</div>
				</li>
			</ul>
		</div>
</template>

<script>
import { NavBar } from 'vant';
import { Toast } from 'vant';
export default {
    components:{NavBar},
    data () {
      return {
        list: [{
          title: 'Chrome更新了',
          imgUrl: 'images/Chrome.png',
          tips: '不再支持Flash视频播放',
          time: '上午 8:30'
        },
        {
          title: '电影新资讯',
          imgUrl: 'images/Sina.png',
          tips: '电影《红海行动》上映以来票房暴涨，很多国人表示对国产电影有了新的改观',
          time: '上午 12:00'
        },
        {
          title: '聚焦两会·共筑中国梦',
          imgUrl: 'images/video.png',
          tips: '习近平代表的两会故事',
          time: '下午 17:45'
        }],
      startX: 0,
      endX: 0,
      }
    },
    methods: {
      onClickLeft() {
          Toast('返回');
      },
      //跳转
					skip:function() {
						if(this.checkSlide()) {
							this.restSlide();
						} else {
							alert('You click the slide!')
						}
					},
					//滑动开始
					touchStart:function(e) {
						// 记录初始位置
						this.startX = e.touches[0].clientX;
					},
					//滑动结束
					touchEnd:function(e) {
						// 当前滑动的父级元素
						let parentElement = e.currentTarget.parentElement;
						// 记录结束位置
						this.endX = e.changedTouches[0].clientX;
						// 左滑
						if(parentElement.dataset.type == 0 && this.startX - this.endX > 30) {
							this.restSlide();
							parentElement.dataset.type = 1;
						}
						// 右滑
						if(parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
							this.restSlide();
							parentElement.dataset.type = 0;
						}
						this.startX = 0;
						this.endX = 0;
					},
					//判断当前是否有滑块处于滑动状态
					checkSlide:function() {
						let listItems = document.querySelectorAll('.list-item');
						for(let i = 0; i < listItems.length; i++) {
							if(listItems[i].dataset.type == 1) {
								return true;
							}
						}
						return false;
					},
					//复位滑动状态
					restSlide:function() {
						let listItems = document.querySelectorAll('.list-item');
						// 复位
						for(let i = 0; i < listItems.length; i++) {
							listItems[i].dataset.type = 0;
						}
					},
					//删除
					deleteItem:function(e) {
						// 当前索引
						let index = e.currentTarget.dataset.index;
						// 复位
						this.restSlide();
						// 删除
						this.list.splice(index, 1);
					}
    }
};
</script>

<style lang="scss" scoped>
  @import '../../common/sass/mixin.scss';

  .van-nav-bar .van-icon {
      color: #000;
  }

			.list_ul {
				list-style: none;
				overflow: hidden;
			}

			.page-title {
				text-align: center;
				font-size: 0.85rem;
				padding: 0.5rem 0.75rem;
				position: relative;
			}

			.list-item {
				position: relative;
				height: 4rem;
				-webkit-transition: all 0.2s;
				transition: all 0.2s;
			}

			.list-item[data-type="0"] {
				transform: translate3d(0, 0, 0);
			}

			.list-item[data-type="1"] {
				transform: translate3d(-270px, 0, 0);
			}

			.list-box {
				background: #fff;
				display: flex;
				align-items: left;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				justify-content: flex-start;
			}


			.list-item  {
        height: 50px;
        padding: 15px;
			    span{
            display: inline-block;
            height: 50px;
            line-height: 50px;

          }
          .storeImage{
            width: 50px;
            height: 50px;
            float: left;
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
      .storeName{
        float: left;
        margin-left: 16px;
      }
      .storeBianzu{
        width: 20px;
        height: 20px;
        line-height: 20px;
        @include bg-image('../../static/images/bianzu');
        background-size: 100%;
        background-position: left center;
        background-repeat: no-repeat;
        @include tb;
          right: 15px;
      }
			}

			.list-item .delete {
				width: 90px;
				height: 80px;
				background: #999999;
				font-size: 0.85rem;
				color: #fff;
				text-align: center;
				line-height: 80px;
				position: absolute;
				top: 0;
				right: -90px;
      }
      	.list-item .special {
					width: 90px;
				height: 80px;
				background: #2F80FD;
				font-size: 0.85rem;
				color: #fff;
				text-align: center;
				line-height: 80px;
				position: absolute;
				top: 0;
				right: -180px;
      }
      	.list-item .cancel {
				width: 90px;
				height: 80px;
				background: #FE2E05;
				font-size: 0.85rem;
				color: #fff;
				text-align: center;
				line-height: 80px;
				position: absolute;
				top: 0;
				right: -270px;
      }
  // .storeList{
  //   height: 50px;
  //   line-height: 50px;
  //   // overflow: hidden;
  //   position: relative;
  //   -webkit-transition: all 0.2s;
  //   transition: all 0.2s;
  //   @include clearFix();


  // }






</style>
